<template>
  <el-tabs v-model="tabName">
    <!-- staff -->
    <el-tab-pane :name="tabNames[0]" :label="$t('loc.allStf')" v-if="!isTeacher">
      <recipient-select-staff-panel v-model:recipient="staffRecipient"
                                    v-model:labels="staffLabels"
                                    @check="handleCheck"
                                    ref="staff"/>
    </el-tab-pane>
    <!-- parent -->
    <el-tab-pane :name="tabNames[1]" :label="$t('loc.allPnt')">
      <recipient-select-parent-panel v-model:recipient="parentRecipient"
                                     v-model:labels="parentLabels"
                                     @check="handleCheck"
                                     ref="parent"/>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import {mapState} from "vuex";
import RecipientSelectStaffPanel from "@/views/modules/message/MessageCreate/Recipient/RecipientSelectStaffPanel";
import RecipientSelectParentPanel from "@/views/modules/message/MessageCreate/Recipient/RecipientSelectParentPanel";
import {acrossRole} from "@/utils/common";

export default {
  name: "RecipientSelectTab",
  components: {
    RecipientSelectStaffPanel,
    RecipientSelectParentPanel
  },
  props: [
    'recipient', // 已选接收人
    'labels', // 已选接收人标签
  ],
  computed: {
    ...mapState({
      currentUser: state => state.user.currentUser, // 当前用户
    }),
    isTeacher() {
      return acrossRole('TEACHER')
    },
    innerRecipient() {
      return {
        staffCenterIds: this.staffRecipient.centerIds || [],
        staffGroupIds: this.staffRecipient.groupIds || [],
        staffIds: this.staffRecipient.staffIds || [],
        childCenterIds: this.parentRecipient.centerIds || [],
        childGroupIds: this.parentRecipient.groupIds || [],
        childIds: this.parentRecipient.childIds || [],
      }
    },
    innerLabels() {
      return {
        staff: this.staffLabels,
        parent: this.parentLabels
      }
    }
  },
  data() {
    return {
      tabName: 'staff',
      tabNames: ['staff', 'parent'],
      staffRecipient: {},
      staffLabels: [],
      parentRecipient: {},
      parentLabels: [],
    }
  },
  watch: {
    isTeacher: {
      immediate: true,
      handler(value) {
        if (value) {
          this.tabName = this.tabNames[1];
        } else {
          this.tabName = this.tabNames[0];
        }
      }
    },
    innerRecipient: {
      immediate: true,
      handler(value) {
        this.$emit('update:recipient', value)
      }
    },
    innerLabels: {
      immediate: true,
      handler(value) {
        this.$emit('update:labels', value)
      }
    }
  },
  methods: {
    reset() {
      this.$refs.staff && this.$refs.staff.reset();
      this.$refs.parent.reset();
    },
    handleCheck() {
      this.$nextTick(() => this.$emit('check'));
    },
    getChecks () {
      return {
        'staff': this.$refs.staff ? this.$refs.staff.getChecks() : [],
        'parent': this.$refs.parent ? this.$refs.parent.getChecks() : []
      }
    },
    setChecks (checks) {
      this.$refs.staff && this.$refs.staff.setChecks(checks.staff)
      this.$refs.parent && this.$refs.parent.setChecks(checks.parent)
    }
  }
}
</script>

<style scoped lang="less">
.el-tabs /deep/ & {
  height: 100%;

  & > .el-tabs__header {
    margin: 0;

    .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs__nav {
      display: flex;
      justify-content: space-evenly;
      width: 100%;
      padding: 15px 15px 10px;
    }

    .el-tabs__item {
      padding: 0;
      line-height: 40px;
      font-size: 16px;
      height: auto;
      border-bottom: none;
      width: 50%;
      text-align: center;
      border-radius: 2px;

      &.is-active {
        background-color: #CFF0F1;
      }
    }
  }

  & > .el-tabs__content {
    height: calc(100% - 65px);
    padding: 10px 15px;

    .el-tab-pane {
      height: 100%;

      & > * {
        height: 100%;
      }
    }
  }
}
</style>